<template>
  <div class="warp-box">
    <el-row class="search-box" :gutter="10">
      <el-col :span="20">
        <el-input
          style="width:340px"
          v-model="parames.customerName"
          size="small"
          clearable
          placeholder="搜索公司名称"
        ></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="text" icon="el-icon-s-open" @click="handleSearch">高级搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="main-box channel1234" style="margin:10px -5px;">
      <el-col :span="24" v-if="daochuBtn">
        <el-button size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
      </el-col>
      <el-col :span="24">
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          :row-class-name="tableRowClassName"
          style="margin-top:14px;"
        >
          <el-table-column
            show-overflow-tooltip
            width="150"
            fixed="left"
            prop="customerName"
            label="公司名称"
          ></el-table-column>
          <el-table-column width="200" prop="productName" label="产品名称"></el-table-column>
          <el-table-column width="200" prop="contractProductId" label="合同编号"></el-table-column>
          <el-table-column label="执行情况（本年度）">
            <!-- MONEY  收款到期 -->
            <!-- NONE 无 -->
            <!-- DONE 完成 -->
            <!-- PLAN 计划执行 -->
            <el-table-column width="55" prop="executionState" :label="item + '月'" v-for="(item,index) in 12" :key="index">
              <template slot-scope="scope" >
                <div v-if="scope.row.executionState.month[item-1].state">
                  <p v-if="scope.row.executionState.month[item-1].state.name == 'PLAN'" style="width:20px;height:20px;border-radius:50%;border:2px solid #e6e6e6;"></p>
                  <p v-if="scope.row.executionState.month[item-1].state.name == 'MONEY'" style="width:20px;height:20px;border-radius:50%;border:2px solid #ffd200;"></p>
                  <p v-if="scope.row.executionState.month[item-1].state.name == 'DONE'" style="width:20px;height:20px;border-radius:50%;border:2px solid #00c621;"></p>

                </div>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column width="200" prop="seller" label="销售代表">
            <template slot-scope="scope">
              <div>{{scope.row.seller}}(工号：{{scope.row.sellerWorkNumber}})</div>
            </template>
          </el-table-column>
          <el-table-column width="100" prop="orgnLabel" label="所属部门"></el-table-column>
          <el-table-column width="100" prop="serviceCompany" label="服务公司"></el-table-column>
          <el-table-column width="100" prop="startMonth" label="开始月份"></el-table-column>
          <el-table-column width="100" prop="endMonth" label="截止月份"></el-table-column>
          <el-table-column width="100" prop="overServiceMonth" label="服务到月份"></el-table-column>
          <el-table-column width="100" prop="overMoneyMonth" label="费用到月份"></el-table-column>
          <el-table-column width="100" prop="hasServiceMonth" label="可服务月数"></el-table-column>
          <el-table-column width="120" prop="overCount" label="已完成数量"></el-table-column>
          <el-table-column width="100" prop="applyCount" label="购买数量"></el-table-column>
          <el-table-column width="100" prop="unitPrice" label="月费用"></el-table-column>
          <el-table-column width="100" prop="receiptedAmount" label="累计实收"></el-table-column>
          <el-table-column width="100" prop="expenditureAmount" label="累计支出"></el-table-column>
          <el-table-column width="100" prop="balance" label="余额"></el-table-column>
          <el-table-column width="100" prop="arrears" label="代收"></el-table-column>
          <el-table-column width="100" prop="state" label="状态"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <div style="margin-top:20px;">
          <p style="float:left;width:20px;height:20px;border-radius:50%;border:2px solid #e6e6e6;"></p>
          <p style="float:left;line-height:20px;margin: 0 10px 0 5px">计划执行</p>
          <p style="float:left;width:20px;height:20px;border-radius:50%;border:2px solid #ffd200;"></p>
          <p style="float:left;line-height:20px;margin: 0 10px 0 5px">收款到期</p>
          <p style="float:left;width:20px;height:20px;border-radius:50%;border:2px solid #00c621;"></p>
          <p style="float:left;line-height:20px;margin: 0 10px 0 5px">完成</p>
        </div>
        <pages :parames="parames" @render="checkPage"></pages>
      </el-col>
    </el-row>

    <searchDialog :searchData="searchData" @checkSearch="checkSearch" @resetSearch="resetSearch"></searchDialog>
  </div>
</template>

<script>
import searchDialog from "./opportSearchDialogAccountService"

export default {
  data() {
    return {
      loading: false,
      parames: {
        page: 1, //页码index
        limit: 10, //页码最大
        relation: 'and', 
        customerName: '', //联系人名称
        totalCount: 0,
        search: []
      },
      daochuBtn: false,
      searchData: {
        //搜索弹窗
        show: false
      },
      tableData: []
    };
  },
  components: {
    searchDialog
  },
  methods: {
    search() {
      //查询
      this.parames.page = 1;
      let searchDate = this.parames.search
      let n = 0
      this.parames.search.forEach(el=>{
        if (el.key == 'customerName') {
          n = 1
        }
      })
      if (this.parames.customerName && n == 0) {
        this.parames.search.push({
          key: 'customerName',
          value: this.parames.customerName,
          vague: true,
        })
      } else if (this.parames.customerName && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'customerName') {
            el.value = this.parames.customerName
          }
        })
      } else if (!this.parames.customerName && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'customerName') {
            this.parames.search.splice(index,1)
          }
        })
      }
      this.getList()
    },
    handleSearch() {
      //打开高级搜索弹窗
      this.searchData.customerName = this.parames.customerName
      this.searchData.show = true;
    },
    handleExport () {
      var search = ''
      if (this.parames.search.length>0) {
        search = encodeURIComponent(JSON.stringify(this.parames.search).toString())
      }
      window.location.href = this.$api.postrReportformAccountServiceExport+'?companyId=' + this.$utils.getLocalStorage('user').companyId +'&departmentId=' + this.$utils.getLocalStorage('user').departmentId + '&search=' + search  + '&page=' + this.parames.page + '&limit=' + this.parames.limit
    },
    resetSearch () {
      this.parames.customerName = ''
    },
    checkSearch (value) {
      this.parames.search = value
      value.forEach(el=>{
        if(el.key == 'customerName') {
          this.parames.customerName = el.value
        }
      })
      this.parames.page = 1
      this.getList()
    },
    checkPage () {
      this.getList()
    },
    handleAdd() {
      //新建商机
      this.dialogData.show = true;
    },
    getList() {
      //获取页面数据
      this.loading = true
      this.$post(this.$api.postReportformAccountService,this.parames).then(response => {
        if (response.data.succeed) {
          this.parames.totalCount = response.data.data.totalElements
          this.tableData = response.data.data.content
        }
        setTimeout(() => {
          this.loading = false
        }, 200);
      })
    },
    tableRowClassName({ row, rowIndex }) {
      //斑马表格
      if (rowIndex % 2 === 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      return "";
    }
  },
  mounted() {
    let buttonLimit = this.$utils.getLocalStorage('buttonlist')  //按钮缓存
    if (buttonLimit.indexOf('k072') !== -1) {
      this.daochuBtn = true
    }
    this.getList()
  }
};
</script>

<style>
.el-table .warning-row {
  background: #f9f9f9;
}
.el-table .success-row {
  background: #fff;
}
</style>